<template>
  <div>
    <div style="margin-left: 160px">
      <el-select
        v-model="page.level"
        placeholder="请选择"
        @change="handLevelChange"
      >
        <el-option label="一级回复" value="1"> </el-option>
        <el-option label="二级回复" value="2"> </el-option>
      </el-select>
    </div>
    <div style="margin-left: 100px">
      <div
        v-for="(item, index) in applyMe"
        :key="index"
        style="margin-top: 20px"
      >
        <div style="display: flex">
          <el-avatar
            size="large"
            :src="item.head"
            style="width: 50px; height: 50px"
          ></el-avatar>
          <div style="width: 70%; margin-left: 20px">
            <div>
              <span style="color: #ed6a12">{{ item.nickName }}</span
              ><span>在帖子</span
              ><span style="color: #ed6a12">{{ item.postName }}</span
              >&nbsp;&nbsp;&nbsp;<span style="font-size: 13px; color: grey"
                >回复{{
                  item.parentName == null ? "我" : item.parentName
                }}</span
              >
            </div>
            <div style="padding-top: 20px; width: 100%; color: rgb(64, 62, 62)">
              {{ item.content }}
            </div>
            <div style="margin-top: 10px; color: grey; font-size: 12px">
              <span>{{ item.applyTime }}</span>
              <el-link
                style="margin-left: 50px; color: rgb(99, 98, 98)"
                @click="openApplyDia(item)"
                ><i class="el-icon-message"></i>回复</el-link
              >
            </div>
            <el-divider></el-divider>
          </div>
        </div>
      </div>
      <!-- 回复框开始 -->
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-input
          type="textarea"
          resize="none"
          :rows="3"
          placeholder="快来回复吧"
          maxlength="200"
          show-word-limit
          v-model="apply.content"
        >
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button type="info" @click="applyTo">回 复</el-button>
        </span>
      </el-dialog>
      <!-- 回复框结束 -->
      <!-- 分页开始 -->
      <br />
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 21, 27, 36]"
          :page-size="page.pageSize"
          layout="total, prev, pager, next, sizes"
          :total="page.total"
        >
        </el-pagination>
      </div>
      <!-- 分页结束 -->
    </div>
  </div>
</template>
    
<script>
import { getApplyMe, addApply } from "../../api/applyMG";
export default {
  name: "ApplyMe",
  data() {
    return {
      dialogVisible: false, //回复框默认关闭
      apply: {
        // id: "", //数据库自增
        // userId: localStorage.getItem("userId"),
        // postId: "", //item.postId
        // content: "", //输入框绑定的值
        // applytime: "", //后端赋值
        // parentId: "", //item.userId
        // parentApply: "", //item.id
        // delFlag: 0, //数据库默认为0
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        level: "1", //1就是一级评论，2就是二级评论
        userId: localStorage.getItem("userId"), //查这个用户的
      },
      applyMe: [],
    };
  },

  methods: {
    async applyTo() {
      //请求后端并关闭dialog
      await addApply(this.apply).then((res) => {
        if (res.data.code == 200) {
          // console.log(res.data.data.list);
          this.$message.success(res.data.msg);
          this.apply = {};
          this.dialogVisible = false;
          this.getLists();
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    openApplyDia(item) {
      console.log(item);
      //打开哪个dialog就赋值哪个的这些数据
      this.apply.postId = item.postId;
      this.apply.parentId = item.userId;
      if (item.parentApply == null) {
        this.apply.parentApply = item.id;
      } else {
        this.apply.parentApply = item.parentApply;
      }
      this.apply.userId = localStorage.getItem("userId");
      this.dialogVisible = true;
    },
    handleClose(done) {
      //关闭回复框，清空apply中的值
      done();
      this.apply = {};
    },
    handLevelChange() {
      //评论等级变化,再重新获取内容
      this.getLists();
    },
    async getLists() {
      await getApplyMe(this.page).then((res) => {
        if (res.data.code == 200) {
          // console.log(res.data.data.list);
          this.page.total = res.data.data.total;
          this.applyMe = res.data.data.list;
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    handleSizeChange(pageSize) {
      //改变每页尺寸触发事件
      this.page.pageSize = pageSize;
      this.getLists();
    },
    handleCurrentChange(currentPage) {
      //改变当前页也会触发事件
      this.page.currentPage = currentPage;
      this.getLists();
    },
  },
  mounted() {
    this.getLists();
  },
};
</script>